<template>
  <div class="app-container">
    <!-- 表头工具栏 -->
    <div class="toolbar-container">
      <el-input style="width: 200px;" />

      <el-button type="primary" icon="el-icon-search">搜索</el-button>
      <el-button style="margin-left: 10px;" type="primary" icon="el-icon-edit" 
        @click="handleCreate">添加</el-button>
      <el-button style="margin-left: 10px;" type="primary" icon="el-icon-edit" 
        @click="handleAddBat()">批量删除</el-button>

    </div>

    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>

      <el-table-column label="编号" align="center" width="65" prop="id">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" width="150px" align="center" prop="archiveName">
      </el-table-column>

      <el-table-column label="是否分级" width="150px" align="center" prop="haschild">
        //显示转换，如果为0则显示否，非0则 是
        <template slot-scope="scope">
          <span>{{ scope.row.haschild=='0' ? '否' : '是' }}</span>
        </template>        
      </el-table-column>

      <el-table-column label="备注" prop="remark">
      </el-table-column>

      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination :current-page="pageQuery.page" 
        :page-sizes="[10,20,30, 50]" 
        :page-size="pageQuery.size" 
        :total="total" background 
        layout="total, sizes, prev, pager, next, jumper" 
        @size-change="onPageSizeChange" 
        @current-change="onPageChange"/>
    </div>

    <el-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="item" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="名称">
          <el-input v-model="item.archiveName" prop="archiveName"/>
        </el-form-item>
        <el-form-item label="是否分级">
          <el-input v-model="item.haschild" prop="haschild"/>
        </el-form-item>
        <el-form-item label="备注">
          <el-input :autosize="{ minRows: 2, maxRows: 4}" prop="remark"
            v-model="item.remark" type="textarea" placeholder="请输入"/>
        </el-form-item>
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">确认</el-button>
        <el-button v-else type="primary" @click="updateData">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList,delAri,updateAri,addAri,delAriBat } from '@/api/archive'


export default {
  data() {
    return {
      selectedItems: [],
      list: [],
      total: null,
      listLoading: true,
      pageQuery: {
        page: 1,
        size: 20
      },

      item: {
        id: undefined,
        remark: '这是备注',
        archiveName: '物流管理',
        haschild: '是'
      },
      dialogFormVisible: false,
      dialogStatus: '',
      titleMap: {
        update: '编辑',
        create: '添加'
      },
      rules: {
        archiveName: [{ required: true, message: '名称必须输入', trigger: 'change' }],
        haschild: [{ required: true, message: '请输入是否分级', trigger: 'blur' }]
      },
    }
  },

  created() {
    // 页面创建的时候，去加载文章列表
    this.getList()
  },

  methods: {
    // 加载文章列表
    getList() {
      this.listLoading = true

      // 发送http请求，获取数据
      fetchList(this.pageQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.listLoading = false
      })
    },
    //批量删除
    handleAddBat(){
      var array=this.selectedItems
      if (array==null||array.length==0) {
        return ;
      }
      var ids=''
      for (let index = 0; index < array.length-1; index++) {
        const element = array[index].id
        ids+='ids='+element+'&'
      }
       ids+='ids='+array[array.length-1].id
      //  console.log(ids)

      delAriBat(ids).then(response=>{
        this.getList()
        this.$notify({
          title: '提示',
          message: response.data.message,
          duration: '2000'
        })
      })
    },

    onPageSizeChange(size) {
      this.pageQuery.size = size
      this.getList()
    },

    onPageChange(page) {
      this.pageQuery.page = page
      this.getList()
    },

    handleCreate() {
      this.item={}
      this.dialogStatus="create"
      this.dialogFormVisible=true
    },

    createData(){
      addAri(this.item).then(response=>{
        this.getList()
        this.dialogFormVisible=false
        this.$notify({
          title: '提示',
          message: response.data.message,
          duration: '2000'
        })       
      })
    },

    handleDelete(row) {
      this.item=Object.assign({},row)
      delAri(this.item).then(response=>{
        this.getList()
        this.$notify({
          title: '提示',
          message: response.data.message,
          duration: '2000'
        });         
      })
    },

    handleUpdate(row) {
      this.item = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },

    updateData() {
      updateAri(this.item).then(response=>{
        this.getList()
        this.dialogFormVisible=false
        this.$notify({
          title: '提示',
          message: response.data.message,
          duration: '2000'
        });         
      })
    },

    handleSelectionChange(selected) {
      // console.log(selected)
      this.selectedItems = selected;
    }
  }
}
</script>